<template>
    <div class="pay-container p-[20rpx]">
        <div class="result bg-white p-[20rpx] rounded-md">
            <div class="flex flex-col items-center my-[40rpx]">
                <u-image class="status-image" src="/static/images/payment/icon_succeed.png" width="100" height="100"
                    shape="circle" />
                <text class="text-2xl font-medium mt-[20rpx]">支付成功</text>
                <div class="text-3xl font-medium mt-[20rpx]">¥ {{ orderInfo && orderInfo.price }}</div>
            </div>
        </div>
        <div class="cell-card result bg-white rounded-md mt-[40rpx]">
            <div class="cell-row">
                <span class="label">订单号:</span>
                <span class="value">{{ orderInfo && orderInfo.pay_id }}</span>
            </div>

            <div class="cell-row">
                <span class="label">支付时间:</span>
                <span class="value">{{ orderInfo && orderInfo.create_time }}</span>
            </div>
            <div class="cell-row">
                <span class="label">支付金额:</span>
                <span class="value">¥ {{ orderInfo && orderInfo.price }}</span>
            </div>
            <!-- <div class="cell-row">
                <span class="label">订单信息:</span>
                <span class="value content">{{ orderInfo && orderInfo.content }}</span>
            </div> -->
            <div class="cell-row">
                <span class="label">添加微信:</span>
                <!-- <div class="inline-flex cursor-pointer" @click="addWechat">
                    <span class="value font-bold mr-1" style="color: #8fa7e4">{{ orderInfo && orderInfo.pay_wechat }}</span>
                    <i style="color: #8fa7e4; font-size: 16px" class="iconfont icon-fuzhi"></i>
                </div> -->
                <text class="inline-flex cursor-pointer" selectable user-select>{{ orderInfo && orderInfo.pay_wechat
                }}</text>
            </div>
        </div>
        <p class="notice">提示:支付成功后,长按微信号手动复制管理员微信。</p>

        <div class="mt-[80rpx]">
            <div class="mb-[20rpx]">
                <u-button type="primary" plain shape="circle" hover-class="none" @click="goHome">
                    返回首页
                </u-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import * as accountApi from '@/api/account';
import { onLoad } from '@dcloudio/uni-app'
import Clipboard from 'clipboard';

const orderId: any = ref(null); // 订单id
const orderInfo: any = ref(null);

onLoad(async (options) => {
    console.log("options", options);
    if (options && options.order_id) {
        orderId.value = options.order_id;
        getOrderDetail();
    }
})

// 获取订单详情
const getOrderDetail = async () => {
    const res = await accountApi.orderDetail(orderId.value);
    orderInfo.value = res;
}

const goHome = () => {
    uni.navigateTo({ url: '/pages/index/index' });
};

const addWechat = () => {
    const wechat = orderInfo.value.pay_wechat;

    setTimeout(() => {
        uni.setClipboardData({
            data: wechat, //要被复制的内容
            success: () => {
                uni.showToast({
                    //提示
                    title: '复制成功',
                });
            },
            fail: (err) => {
                uni.showToast({
                    title: '复制失败' + JSON.stringify(err),
                    icon: 'none'
                });
            }
        });
    }, 300)

};
</script>

<style lang="scss" scoped>
.pay-container {
    .cell-card {
        @apply box-border;
        padding: 30rpx 30rpx;

        .cell-row {
            @apply flex items-center;
            font-size: 30rpx;
            margin-bottom: 20rpx;

            .label {
                @apply inline-block;
                width: 180rpx;
            }
        }
    }

    .notice {
        color: red;
        font-size: 28rpx;
        margin-top: 20rpx;
    }
}
</style>
